import { Column, Line, Pie } from '@ant-design/plots';
import { Spin } from 'antd';
import _ from 'lodash';
import React, { useMemo } from 'react';
import { type ScChartsProps } from './types';
const ScCharts: React.FC<ScChartsProps> = React.memo(
  ({ type, loading, customConfig }) => {
    const cusConfig = useMemo(() => {
      return customConfig;
    }, [JSON.stringify(customConfig)]);
    switch (type) {
      case 'Line':
        return (
          <>
            <Spin spinning={loading}>
              <Line {...cusConfig}></Line>
            </Spin>
          </>
        );
      case 'Pie':
        return (
          <Spin spinning={loading}>
            <Pie {...cusConfig}></Pie>
          </Spin>
        );
      case 'Column':
        return (
          <Spin spinning={loading}>
            <Column {...cusConfig}></Column>
          </Spin>
        );
      default:
        return <></>;
    }
  },
  (prevProps, nextProps) => {
    return _.isEqual(prevProps, nextProps);
  },
);
export default ScCharts;
